﻿@using ExpressManagement.Areas.BackSys.ServiceTools;
@using DAL.Models;
@using Microsoft.AspNetCore.Http;
@{
    Layout = "../Shared/_LayoutBase.cshtml";
    var sess = Context.Session;
    string loginType = sess.GetString("loginType");
    string userName = sess.GetString("userName");
    //IList<Bag> totalList = ViewBag.BagList;
    int? page = sess.GetInt32("bagPage");
    int? rows = sess.GetInt32 ("bagRows");
    int? totalPages = sess.GetInt32("bagTotalPages");

}
@section CssLink{


}
<section id="app">
    <!-- header section end-->
    <!-- page heading start-->
    <div class="page-heading">
        <h3>
            快递数据
        </h3>
        <ul class="breadcrumb">
            <li>
                <a href="">物流管理系统</a>
            </li>
            <li>
                <a href="">快递管理</a>
            </li>
            <li class="active"> 快递派送 </li>
        </ul>
    </div>
    <!-- page heading end-->
    <!--body wrapper start-->
    <div class="wrapper">
        <div class="row">
            <div class="col-sm-12">
                <section class="panel">

                    <header class="panel-heading">
                        快递汇总
                        <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                        </span>
                    </header>
                    <div class="panel-body">
                        <div class="adv-table">
                            <table class="display table table-bordered table-striped">
                                <thead>
                                    <tr>

                                        <th>包裹号</th>
                                        <th>寄出日期</th>
                                        <th>收件人姓名</th>
                                        <th>收件人电话</th>
                                        <th>收件人地址</th>
                                        @*<th>寄件人姓名</th>*@
                                        @*<th>寄件人电话</th>*@
                                        @*<th>寄件人地址</th>*@
                                        @*<th>寄件信息</th>*@
                                        <th>更新日期</th>
                                        <th>运输状态</th>
                                        <th>送达日期</th>

                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="table_body">


                                    <tr v-for="item in totalList" class="gradeA">
                                        <td class="center hidden-phone">{{item.BagId}}</td>
                                        <td class="center hidden-phone">
                                            {{formatDateTime2(item.SendDate)}}
                                        </td>
                                        <td class="center hidden-phone">{{item.GetterName}}</td>
                                        <td class="center hidden-phone">{{item.GetterPhone}}</td>
                                        <td class="center hidden-phone">{{item.GetterAddress}}</td>
                                        @*<td class="center hidden-phone">@Model[i].SenderName</td>
                                            <td class="center hidden-phone">@Model[i].SenderPhone</td>*@
                                        @*<td class="center hidden-phone">@Model[i].SenderAddress</td>*@
                                        @*<td class="center hidden-phone">@Model[i].SendInfo</td>*@
                                        <td class="center hidden-phone">{{formatDateTime2(item.UpdateTime)}}</td>
                                        <td class="center hidden-phone">{{item.ArriveInfo}}</td>
                                        <td class="center hidden-phone">{{formatDateTime2(item.ArriveDate)}}</td>
                                        <td class="center hidden-phone">
                                            <button class="btn btn-default" type="button" data-toggle="modal" data-target="#dispModal" v-on:click="get_info(item.BagId,'r')">查看</button>
                                            <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#deliveryModal" v-on:click="delivery_info(item.BagId,'delivery_begin')">派送</button>
                                            <button class="btn btn-info" type="button" data-toggle="modal" data-target="#deliveryModal" v-on:click="delivery_info(item.BagId,'delivery_finish')">送达</button>
                                        </td>
                                    </tr>
                                </tbody>
                                @*<tfoot>
                                        <tr>

                                            <th>包裹号</th>
                                            <th>寄出日期</th>
                                            <th>收件人姓名</th>
                                            <th>收件人电话</th>
                                            <th>收件人地址</th>
                                            <th>寄件人姓名</th>
                                            <th>寄件人电话</th>
                                            <th>寄件人地址</th>
                                            <th>寄件信息</th>
                                            <th>更新日期</th>
                                            <th>操作</th>
                                        </tr>
                                    </tfoot>*@
                            </table>

                            <ul class="pagination pull-right">
                                <li v-if="page<=1" class="page-item disabled"><a class="page-link">&laquo;</a></li>
                                <li v-else class="page-item"><a class="page-link" href="" v-on:click.prevent="changePage(page-1,'total')">&laquo;</a></li>
                                <li v-for="i in totalPages" class="page-item"> <a class="page-link" href="" v-on:click.prevent="changePage(i,'total')">{{i}}</a></li>
                                <li v-if="page>=totalPages" class="page-item disabled"><a class="page-link">&raquo;</a></li>
                                <li v-else class="page-item"><a href="" v-on:click.prevent="changePage(page+1,'total')" class="page-link">&raquo;</a></li>
                            </ul>
                        </div>

                    </div>
                </section>

            </div>


        </div>

    </div>


    @*{page_str} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*@
    <!-- 模态框示例（Modal） -->
    <form method="post" action="" class="form-horizontal" role="form" id="form_data" style="margin: 20px;">
        <div class="modal fade" id="dispModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            快件详细信息
                        </h4>
                    </div>
                    <div class="modal-body">
                            <div class="form-group">
                                <label for="user_id" class="col-sm-3 control-label">包裹号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="BagId" name="user_id" disabled="">

                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">寄出日期</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="SendDate" name="SendDate" disabled="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">收件人姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="GetterName" name="GetName" disabled="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">收件人电话</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="GetterPhone" name="GetPhone" disabled="">
                                    @*<textarea class="form-control" name="remark" value="{remark}" id="remark"
                                        placeholder="备注">*@
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">收件人地址</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="GetterAddress" name="GetAddress" disabled="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">寄件人姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="SenderName" name="sendName" disabled="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">寄件人电话</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="SenderPhone" name="sendPhone" disabled="">

                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">寄件人地址</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="SenderAddress" name="sendAddress" disabled="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">寄件信息</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" v-model="SendInfo" name="sendInfo" disabled="">
                                </textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">更新日期</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" v-model="UpdateDate" name="updateDate" disabled="">
                                </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </form>


    <!-- 模态框示例（Modal） -->
    <form method="post" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
        <div class="modal fade" id="deliveryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            快件派送/送达确认
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="remark" class="col-sm-3 control-label center ">确认派送/送达?</label>
                            @*<div class="col-sm-9">
                                    <input type="text" class="form-control" id="update_updateDate" name="updateDate">
                                </div>*@
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button  type="button" class="btn btn-default" data-dismiss="modal">
                            取消
                        </button>
                        <!-- <button type="button" onclick="trigger_delivery()" class="btn btn-primary" data-dismiss="modal">
                            确认
                        </button><span id="tip"> </span> -->
                        <button type="button"  v-on:click.prevent="check_form" class="btn btn-primary">
                            提交
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </form>
</section>






@section JavascriptLink{
   
}
@section Javascript{

    <script>
          var vm = new Vue({
                el: "#app",
              data: {
                   act :'',
                   mode :'',
                   senderList: [],
                   getterList: [],
                   totalList:[],
                   page: 1,
                   senderTotalPages: 1,
                   getterTotalPages:1,
                   totalPages: 1,
                   Action:'keep',
                   TrueName: '',
                   Idcard: '',
                   AddTime: '',
                   UpdateTime: '',
                   Address:'',
                   Email: '',
                   ContactAddress: '',
                   Title:'',
                   Info: '',
                   SubmitTime: '',
                   ReplyInfo: '',
                   ReplyTime: '',
                   BagId: '',
                   SendDate: '',
                   GetterName: '',
                   SenderName: '',
                   SenderPhone: '',
                   SenderAddress: '',
                   SendInfo: '',
                   UpdateInfo: '',
                   UpdateDate:'',
                   GetterPhone: '',
                   GetterAddress:'',
                },
               methods: {
                   delivery_info: function (id, mode) {
                       this.BagId = id;
                       this.act = mode;
                  },
                   formatDateTime : function (str) {
                       if (str == "") return str;
                       var now = new Date(parseInt(str.replace("/Date(", "").replace(")/", ""), 10));
                       var year = now.getFullYear();  //取得4位数的年份
                       var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
                       var date = now.getDate();      //返回日期月份中的天数（1到31）
                       var hour = now.getHours();     //返回日期中的小时数（0到23）
                       var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
                       var second = now.getSeconds(); //返回日期中的秒数（0到59）
                       return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
                   },
                    formatDateTime2:function(str) {
                        if (str == "") return str;
                        var now = new Date(str);
                        var year = now.getFullYear();  //取得4位数的年份
                        var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
                        /*   if (month < 10) month = '0' + month;*/
                        var date = now.getDate();      //返回日期月份中的天数（1到31）
                        //if (date < 10) date = '0' + date;
                        var hour = now.getHours();     //返回日期中的小时数（0到23）
                        //if (hour < 10) hour = '0' + hour;
                        var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
                        if (minute < 10) minute = '0' + minute;
                        var second = now.getSeconds(); //返回日期中的秒数（0到59）
                        if (second < 10) second = '0' + second;
                        return year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second;
                    },


                   delete_info: function (id) {
                       this.BagId = id;


                        },
                                // 编辑表单
                   get_info: function (id, type) {

                       if (id == null) {
                                commonUtil.alert('错误','Error！','danger');
                                return false;
                            }
                            id = id.toString();
                            var sendData = {
                               BagId:id,
                               Action:$('#act').val()
                            }
                            //var sendData = new FormData();
                            //sendData.append('BagId', id);
                            //sendData.append('Action', $('#act').val());

                            if (id == null) {
                                commonUtil.alert('错误', 'Error！', 'danger');
                                return false;
                            }
                        id = id.toString();

                       axios({
                           method: "get",
                           params: sendData,
                                responseType: 'json',
                                // `transformRequest` 允许在向服务器发送前，修改请求数据
                                // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
                                // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                url: "@Url.Action("GetItemByID", "Bag")"

                            }).then((data) => {
                                ////console.log(data);
                                // 解析json数据
                                //var data = data;
                                //var data_obj = eval("(" + data + ")");
                                // 将JSON编码的字符串转换为JS对象
                                //console.log(data.data);
                                var data_obj = JSON.parse(data.data);
                                //tool =  new datesFn();
                                ////console.log(typeof (data_obj.SendDate));
                                // 赋值
                                //console.log(data_obj);
                                this.BagId = data_obj.BagId;
                                vm.SendDate = this.formatDateTime(data_obj.SendDate) ;
                                vm.GetterName = data_obj.GetterName;
                                vm.GetterPhone = data_obj.GetterPhone;
                                vm.GetterAddress = data_obj.GetterAddress;
                                vm.SenderName = data_obj.SenderName;
                                vm.SenderPhone = data_obj.SenderPhone;
                                vm.SenderAddress = data_obj.SenderAddress;
                                vm.SendInfo = data_obj.SendInfo;
                                vm.UpdateDate=this.formatDateTime(data_obj.UpdateTime);
                            }).catch(error => {
                                commonUtil.alert('错误', error, 'danger');
                            });

                        },
                        // 提交表单
                   check_form: function () {

                           var id = vm.BagId;
                           if (!id) {
                                    commonUtil.alert('错误','快递ID不能为空！','danger');
                                    return false;
                                }
                            var modal = '';
                           

                           var sendData = new FormData();
                            var sendUrl = '';

                            modal = $('#deliveryModal');
                            sendUrl = "@Url.Action("Update", "Bag")";
                            sendData.append('ID', vm.BagId);
                            sendData.append('Action', this.act);

                            //console.log(sendData);

                            ////console.log(sendData);
                            // 异步提交数据到Action/GetBagItemByID页面
                            axios({
                                url: sendUrl,
                                method: "post",
                                responseType: 'json',
                                data: sendData,
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    $("#tip").html("<span style='color:blue'>正在处理...</span>");
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],

                            }).then((data) => {
                                ////console.log(data);
                                // 将JSON编码的字符串转换为JS对象
                                if (data.data > 0) {
                                    //$("#tip").html("<span style='color:blueviolet'>" + act + "成功！</span>");
                                    commonUtil.message('成功', "操作成功", 'success');
                                    this.changePage(this.page, 'total');
                                    modal.modal('hide');
                                 
                                }
                                else {
                                    //$("#tip").html("<span style='color:red'>失败，请重试</span>");
                                    commonUtil.message('错误', '操作失败', 'danger'); 
                                    modal.modal('hide');
                                }
                            }).catch(error => {
                                commonUtil.alert('错误', error, 'danger');
                            });

                    },


                    changePage: function (page,mode) {
                        sendData = null;
                        this.mode = mode;
                        data = {};
                        formdata = new FormData();
                        if (mode == "sender") {
                            data = {
                                senderPage:page,
                                Action:mode
                            }
                            //formdata.append('senderPage', page);
                            //formdata.append('Action', mode);

                        } else if (mode == "getter") {
                             data = {
                                getterPage:page,
                                Action:mode
                            }
                            //formdata.append('getterPage', page);
                            //formdata.append('Action', mode);
                        } else {
                            data = {
                                pageNum:page,
                                Action:mode
                            }
                            //formdata.append('pageNum', page);
                            //formdata.append('Action', mode);
                        }
                        //console.log(formdata);

                        axios({
                                method: "get",
                            responseType: 'json',
                            params: data,
                                transformRequest: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                                transformResponse: [function (data) {
                                    // 对 data 进行任意转换处理
                                    return data;
                                }],
                                url: "@Url.Action("ChangePage", "Bag")"
                        }).then((data) => {
                           
                            data = JSON.parse(data.data);
                            ////console.log(mode);
                            if (mode == 'total') {
                                totalPages = parseInt(data.totalPages);
                                dataArr = JSON.parse(data.data);
                                this.totalList = dataArr;
                                this.totalPages =totalPages;
                                this.page = page;
               
                            }
                        }).catch(error => {
                                commonUtil.alert('错误',error,'danger');
                            });

                    }
                },
                watch: {
                    userName: {
                        deep: true,
                        handler(obj) {
                            //console.log(obj);
                        }
                    },

               },
              mounted: function () {

                      this.changePage(0, 'total');
               },
               created() {
                   var act = $('#act').val()
                    $('#deliveryModal').on('hide.bs.modal', function () {
                        // 关闭时清空edit状态为add
                        //console.log($('#act').val());
                        if (act != 'keep') {
                            changePage(0,'total');
                            //location.reload();
                        }
                    });
                    $('#deliveryModal').on('hide.bs.modal', function () {
                        // 关闭时清空edit状态为add
                        if (act != 'keep') {
                            //location.reload();
                            changePage(0, 'total');
                        }

                    });




                }
          });



    </script>
}

